﻿@page "/team"
@inherits PmComponentBase

<PageTitle>@T("Team")</PageTitle>

<MTabs Value="_curTab" ValueChanged="value => TabItemChangedAsync(value)" SliderColor="transparent" class="pro-nav remover-ripple">
    <MTab class="text-capitalize pa-0">
        <ChildContent>
            <span class="mtab-tab-line mtab-tab-linear-primary"></span>
            <span class="rounded-circle mtab-tab-indicator mtab-tab-indicator-primary"></span>
            <span class="mtab-tab-title">@T("Project")</span>
        </ChildContent>
    </MTab>
    <MTab class="text-capitalize pa-0" Disabled="_teamDetailDisabled">
        <ChildContent>
            <span class="mtab-tab-line @(_curTab.ToInt32() > 0 ? "mtab-tab-linear-primary" : "mtab-tab-linear-neutral")"></span>
            <span class="rounded-circle mtab-tab-indicator @(_curTab.ToInt32() > 0 ? "mtab-tab-indicator-primary" : "mtab-tab-indicator-neutral")"></span>
            <span class="mtab-tab-title">@T("App")</span>
        </ChildContent>
    </MTab>
</MTabs>

<MTabsItems Value="_curTab" class="app-tab pt-6" Style="height: calc(100% - 24px) !important; background-color:transparent !important">
    <MTabItem>
        <div class="d-flex full-height">
            <div class="pr-6" style="width: calc(100% - 300px); display:block;">
                <div class="full-height" style="overflow: hidden;">
                    <div class="d-flex align-center mb-3">
                        <SSearch @bind-Value="_projectName" BackgroundColor="white" Class="mr-6" MaxWidth="0" Height="40" Dense OnEnter="SearchProject" Placeholder="@T("Please enter the project name and press enter to query")" />
                        <SButton BorderRadiusClass="rounded-lg" Class="m-btn-add-project" Ripple="false" Height="40" OnClick="() => ShowProjectModalAsync()"><SIcon Class="mr-1" Small IsDefaultToolTip="false">mdi-plus </SIcon>@T("Add Project")</SButton>
                    </div>
                    <div style="overflow:hidden; height: calc(100vh - 244px); position: relative;">
                        <ProjectList @ref="_projectListComponent"
                                     Environment="@MultiEnvironmentUserContext.Environment"
                                     FetchProjectCount="GetProjectCount"
                                     OnNameClick="GetProjectDetailAsync"
                                     TeamId="_teamId" />
                    </div>
                </div>
            </div>

            <MNavigationDrawer Right Permanent Class="rounded-4" Width="300">
                <div class="py-4 px-6" style="min-width:300px; display:flex; flex-direction:column;">
                    <MAvatar>
                        <MImage Height="48" Width="48" Src="@_userTeam.Avatar"></MImage>
                    </MAvatar>
                    <MRow NoGutters Class="mt-6">
                        <div class="emphasis--text h6">@_userTeam.Name</div>
                    </MRow>
                    <MRow NoGutters Class="mt-1 text-body2 light-blue-color">
                        @T("ProjectCount"):&nbsp;<b>@_projectCount</b>
                    </MRow>
                    <div class="scrollbar-base scrollbar-4" style="overflow-x: hidden; overflow-y: auto; height: calc(100vh - 354px);">
                        <MRow NoGutters Class="mt-4 text-body2 light-blue-color">
                            @_userTeam.Description
                        </MRow>
                        <MRow NoGutters Class="regular3--text btn mt-6">@T("Admin")</MRow>
                        @foreach (var item in _userTeam.Admins)
                        {
                            <MRow Align="AlignTypes.Center" NoGutters Class="mt-4 text-body2">
                                <MAvatar Class="mr-3">
                                    <MImage Height="48" Width="48" Src="@item.Avatar"></MImage>
                                </MAvatar>
                                @item.DisplayName
                            </MRow>
                        }
                        <MRow NoGutters Class="regular3--text btn mt-6 mb-4">@T("Members")</MRow>
                        @foreach (var item in _userTeam.Members)
                        {
                            <MRow Align="AlignTypes.Center" NoGutters Class="mt-4 text-body2 mb-3">
                                <MAvatar Height="40" Width="40" MinHeight="40" MinWidth="40" Class="mr-3">
                                    <MImage Height="40" Width="40" Src="@item.Avatar"></MImage>
                                </MAvatar>
                                @item.DisplayName
                            </MRow>
                        }
                    </div>
                </div>
            </MNavigationDrawer>
        </div>
    </MTabItem>
    <MTabItem>
        <div class="d-flex full-height">
            <MNavigationDrawer Right Permanent Class="rounded-4" Width="300">
                <div style="min-width:300px; padding:16px 24px; display:flex; flex-direction:column; align-items:center; overflow: auto;">
                    <div style="width:100%; overflow-x: hidden;" class="text-body2">
                        <MRow NoGutters Align="AlignTypes.Center" Justify="JustifyTypes.SpaceBetween">
                            <div class="emphasis--text h6 text-overflow" style="width: 85%;">@_projectDetail.Name</div>
                            <SButton Icon OnClick="() => UpdateProjectAsync(_selectProjectId, true)"><SIcon Color="#485585" Size="20">mdi-pencil</SIcon></SButton>
                        </MRow>
                        <MRow NoGutters Class="mt-4 regular--text body2">
                            @T("AppCount"): @_appCount
                        </MRow>
                        <MRow NoGutters Class="regular3--text btn text-overflow">
                            @_projectDetail.Identity
                        </MRow>
                        <div class="mt-4" style="overflow-y: auto; height: calc(100vh - 370px);">
                            <MRow NoGutters Class="text-overflow2">
                                @_projectDetail.Description
                            </MRow>
                            <MRow NoGutters Class="regular3--text btn mt-6">@T("Creator")</MRow>
                            <MRow Align="AlignTypes.Center" NoGutters Class="mt-4 text-body2">
                                <MAvatar Class="mr-3" Height="40" Width="40" MinHeight="40" MinWidth="40">
                                    <MImage Height="40" Width="40" Src="@_userInfo.Avatar"></MImage>
                                </MAvatar>
                                @_projectDetail.CreatorName
                            </MRow>
                            <MRow NoGutters Class="regular3--text btn mt-6">@T("Participate team")</MRow>
                            <MRow NoGutters Class="mt-4">
                                @foreach (var team in _teams)
                                {
                                    <MTooltip Bottom>
                                        <ActivatorContent>
                                            <MAvatar @attributes="@context.Attrs" MinHeight="24" MinWidth="24" Height="24" Width="24" Class="mr-3">
                                                <MImage Height="24" Width="24" Src="@team.Avatar"></MImage>
                                            </MAvatar>
                                        </ActivatorContent>
                                        <ChildContent>
                                            <span>@team.Name</span>
                                        </ChildContent>
                                    </MTooltip>
                                }
                            </MRow>
                            <MRow NoGutters Class="regular3--text btn mt-6">@T("Environment/Cluster")</MRow>
                            <div style="display:flex; flex-direction:column;align-items:start">
                                @{
                                    var envCluster = _allEnvClusters.Where(envCluster => _projectDetail.EnvironmentClusterIds.Contains(envCluster.Id));
                                    foreach (var item in envCluster)
                                    {
                                        <EnvClusterChip Class="mt-4" EnvironmentName="@item.EnvironmentName" EnvironmentColor="@item.EnvironmentColor" ClusterName="@item.ClusterName" />
                                    }
                                }
                            </div>
                        </div>
                    </div>
                    <div style="width:100%; position: fixed; bottom:24px; right: 24px;" class="regular3--text body2 d-flex justify-end">
                        <DateTimeZone Value="_projectDetail.CreationTime" />
                    </div>
                </div>
            </MNavigationDrawer>

            <div style="width: calc(100% - 300px); display:block;">
                <div class="pt-0 full-height" style="overflow: hidden;">
                    <div class="d-flex align-center mb-6">
                        <SSearch @bind-Value="_appName" BackgroundColor="white" Class="mx-6" MaxWidth="0" Height="40" Dense OnEnter="SearchApp" Placeholder="@T("Please enter the app name and press enter to query")" />
                        <SButton Height="40" BorderRadiusClass="rounded-lg" OnClick="() => ShowAppModalAsync(_projectDetail.Id)"><SIcon Class="mr-1" Small IsDefaultToolTip="false">mdi-plus </SIcon>@T("Add App")</SButton>
                    </div>
                    <div style="overflow:auto; height: calc(100vh - 256px);">
                        @if (_projectApps.Any())
                        {
                            <MRow Class="mx-3">
                                @foreach (var app in _projectApps)
                                {
                                    <MCol Lg="4" Md="6" Sm="12" Class="m-card-wrap">
                                        <AppCard Style="border:none;" OnClick="() => UpdateAppAsync(app)" ShowEditInfo EditInfo="@($"{app.ModifierName}  {T("Edit in")} {app.ModificationTime.Humanize(culture: I18n.Culture)}")" App="app" EnvironmentClusters="app.EnvironmentClusters" Users="_appUsers[app.Id]"></AppCard>
                                    </MCol>
                                }
                            </MRow>
                        }
                        else
                        {
                            <SEmptyPlaceholder Class="ml-5" Style="width: calc(100% - 20px);" />
                        }
                    </div>
                </div>
            </div>
        </div>
    </MTabItem>
</MTabsItems>

<ProjectModal @ref="@_projectModal" Environment="@MultiEnvironmentUserContext.Environment" Projects="_projectListComponent?._projects" DisableTeamSelect="_disableTeamSelect" OnSubmitProjectAfter="OnSubmitProjectAsyncAfter" />

<AppModal @ref="@_appModal" OnSubmitProjectAfter="OnSubmitAppAsyncAfter" />